<template>
  <div>
    <read-card-header ref='cardHeader' @transfer='getCardHeader' @clearData='handleRefresh'></read-card-header>
    <a-row style='height: 30px'></a-row>
    <a-row>
      <a-col span='3' offset='8'>
        <a-button :type='this.button.color' @click='handleChange'
                  style='padding-bottom:10px;padding-right:5px;width: 120px;height: 120px;font-size: 80px;line-height: 60px'
                  shape='circle'>
          {{ button.font }}
        </a-button>
      </a-col>
      <a-col span='10'>
        <a-statistic prefix='￥' :value='this.model.amount' valueStyle='font-size:90px' />
      </a-col>
    </a-row>
    <a-row style='height: 30px'></a-row>
    <a-card class='card' title='收费信息' :bordered='false'>
      <a-form-model ref='form' :model='model' :rules='validatorRules'>
        <a-row>
          <a-col :lg='6' :md='12' :sm='24' :offset='1'>
            <a-form-model-item :labelCol='{lg: {span:9}}' :wrapperCol='{lg:{span:15}}'
                               label='收费类型' prop='certificateType'>
              <j-dict-select-tag type='list' v-model='model.chargeType'
                                 dictCode='charge_type' placeholder='请选择收费类型' />
            </a-form-model-item>
          </a-col>
          <a-col :lg='6' :md='12' :sm='24' :offset='1'>
            <a-form-model-item label='金额' :labelCol='{lg: {span:5}}' :wrapperCol='{lg:{span:19}}' prop='amount'>
              <a-input v-model='model.amount' placeholder='请输入金额' prefix='￥' suffix='RMB' />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-row style='height: 60px'></a-row>
    <a-card class='card' title='账户信息' :bordered='false'>
      <a-descriptions :column='4' bordered size='small'>
        <a-descriptions-item label='姓名'>张三</a-descriptions-item>
        <a-descriptions-item label='身份证号' span='2'>33333333333333333</a-descriptions-item>
        <a-descriptions-item label='电话'>13444444444</a-descriptions-item>
        <a-descriptions-item label='年龄'>28</a-descriptions-item>
        <a-descriptions-item label='性别'>男</a-descriptions-item>
        <a-descriptions-item label='余额'>7868.00</a-descriptions-item>
        <a-descriptions-item label='需补交金额'>7868.00</a-descriptions-item>
        <a-descriptions-item span='2' label='待扣费'>
          药品:200<br />
          其他:67.00<br />
        </a-descriptions-item>
        <a-descriptions-item span='2' label='当日缴费'>
          药品:200<br />
          其他:67.00<br />
        </a-descriptions-item>
        <a-descriptions-item span='2' label='当日扣费'>
          药品:200<br />
          其他:67.00<br />
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <footer-tool-bar>
      <a-space :size='15'>
        <a-button type='primary' @click='handleSubmit' :disabled='!hasPatient' :loading='buttonLoading'>
          提交
        </a-button>
      </a-space>
    </footer-tool-bar>
  </div>
</template>

<script>
import ReadCardHeader from '../../../../components/zoe/ReadCardHeader'
import FooterToolBar from '../../../../components/tools/FooterToolBar'
import { postAction, getAction } from '../../../../api/manage'

export default {
  name: 'collection',
  components: {
    ReadCardHeader,
    FooterToolBar
  },
  data() {
    return {
      buttonLoading: false,
      model: {
        amount: '',
        chargeType: '1',
        patientId: '',
        billType: '1'
      },
      button: {
        font: '收',
        color: 'primary'
      },
      hasPatient: false,
      validatorRules: {
        amount: [
          { required: true, message: '请输入金额!' }
        ]
      }
    }
  },
  created() {
    setTimeout(() => {
      this.getCardHeader()
    }, 200)
  },
  methods: {
    handleChange() {
      console.log('改变票据类型', this.model.billType)
      if (this.model.billType === '1') {
        this.model.billType = '2'
        this.button.font = '退'
        this.button.color = 'danger'
      } else if (this.model.billType === '2') {
        this.model.billType = '1'
        this.button.font = '收'
        this.button.color = 'primary'
      }
    },
    handleSubmit() {
      this.buttonLoading=true;
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('提交内容', this.model)
          postAction('/charge/billPreCharge/create', this.model).then(res => {
            console.log('res',res)
            setTimeout(() => {
              this.buttonLoading = false
            }, 200)
            if (res.success){
              this.$message.success(res.message)
              this.model.amount=''
            }else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    getCardHeader() {
      this.model.patientId = this.$refs.cardHeader.patientInfo.id
      this.hasPatient = this.$refs.cardHeader.hasPatient
    },
    handleRefresh() {
      this.getCardHeader()
    }
  }
}
</script>

<style scoped>

</style>